<template>
    
        <el-drawer
            title="图表配置"
            :visible.sync="drawerVisible"
            :before-close="closeDrawer"
            direction="rtl"
            custom-class="demo-drawer"
            ref="drawer"
            size="50%"
        >
            <div class="demo-drawer__content">
                <el-form :model="form" ref="form" label-width="120px">
                    <el-form-item label="图表名称：">
                        <el-input
                            v-model="form.name"
                            autocomplete="off"
                            placeholder="请输入图表名称"
                            clearable
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="数据源：">
                        <el-select v-model="form.database" placeholder="请选择数据源">
                            <el-option v-for="item in baseList" :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="X轴维度：">
                        <el-select v-model="form.x" placeholder="请选择数据源">
                            <el-option v-for="item in xList" :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="Y轴度量：">
                        <el-select v-model="form.y" placeholder="请选择数据源">
                            <el-option v-for="item in yList" :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item :label="`堆叠组(${index+1})：`" :key="index" v-for="(stack, index) in form.stackList">
                        <el-input v-model="stack.stackName" placeholder="请输入堆叠组名称" style="width:215px" clearable></el-input>
                        <el-select v-model="stack.list" placeholder="请选择堆叠组" filterable collapse-tags multiple @change="checkCate">
                            <el-option v-for="item in categoryList" :key="item.value"
                                :label="item.label"
                                :value="item.value"
                                :disabled="item.disabled"
                            ></el-option>
                        </el-select>
                        <div class="btn-box">
                            <i class="el-icon-circle-plus-outline" @click="addStack(index)"></i>
                            <i class="el-icon-remove-outline" v-if="index > 0" @click="removeStack(index)"></i>
                        </div>
                    </el-form-item>
                </el-form>
                <div class="demo-drawer__footer">
                    <el-button @click="cancelForm">取 消</el-button>
                    <el-button
                        type="primary"
                        @click="submit"
                        :btnLoading="btnLoading"
                        >{{ btnLoading ? '提交中 ...' : '确 定' }}</el-button
                    >
                </div>
            </div>
        </el-drawer>
</template>

<script>
export default {
    props:{
        drawerVisible:{
            type: Boolean,
            default: false
        },
        drawerConfig: Object
    },
    data(){
        return {
            table: false,
            dialog: false,
            btnLoading: false,
            form: {
                chartType: '',
                name: '',
                database: '',
                x: '',
                y: '',
                stackList:[
                    {list:[],stackName: ''}
                ]
            },
            baseList: [
                {label: '数据源一', value: '/category_data'},
                {label: '数据源二', value: 'database2'},
            ],
            xList: [
                {label: '时间', value: 'time'},
                {label: '名称', value: 'name'},
            ],
            yList: [
                {label: '总数', value: 'value'},
                {label: '销售额', value: 'value2'},
            ],
            categoryList: [
                {label: '样例一', value: 'ABCDEF', disabled: false},
                {label: '样例二', value: 'HIGKLM', disabled: false},
                {label: '样例三', value: 'OPQRST', disabled: false},
            ]
        };
    },
    watch: {
        drawerVisible: {
            handler(val) {
                if (val) this.form.chartType = this.drawerConfig.config.chartType;
            },
            deep: true,
            immediate: true
        }
    },
    methods: {
        submit() {
            if (this.btnLoading) {
                return;
            }
            this.$confirm('确定要保存配置吗？')
                .then(() => {
                    this.btnLoading = true;
                    const {x,y,w,h,i,moved} = this.drawerConfig;
                    const item = {
                        config:{...this.form},
                        x,y,w,h,i,moved
                    };
                    this.$emit('closeDrawer', item);
                    this.btnLoading = false;
                })
                .catch(() => {});
        },
        cancelForm() {
            this.btnLoading = false;
            this.$refs.form.resetFields(); // 重置表单
            this.$emit('closeDrawer', 'cancel');
        },
        closeDrawer() {
            console.log('close');
            this.$emit('closeDrawer', 'cancel');
        },
        addStack(index) {
            this.form.stackList.splice(index + 1,0,{list:[],stackName: ''});
        },
        removeStack(index) {
            const list = this.form.stackList[index].list;
            if (list.length > 0) {
                list.forEach(value => {
                    this.categoryList.forEach((item) => {
                        if (value === item.value) {
                            item.disabled = false;
                        }
                    });
                });
            }
            this.form.stackList.splice(index,1);
        },
        checkCate() {
            let checkMap = new Map();
            this.form.stackList.forEach(stack => {
                stack.list.forEach(checkCode => {
                    checkMap.set(checkCode,{});
                });
            });
            
            this.categoryList.forEach((item) => {
                if (checkMap.has(item.value)) {
                    item.disabled = true;
                } else {
                    item.disabled = false;
                }
            });
            console.log(checkMap);
        }
    }
};
</script>

<style lang="scss" scoped>
::v-deep .el-form-item__content{
    text-align: left;
    display: flex;
}
.btn-box{
    display: flex;
    align-items: center;
    i{
        cursor: pointer;
        font-size: 2rem;
        margin: 0 5px;
    }
}
</style>
